<template>
	<div>
		<a-card :bordered="false" class="search-form">
			<form-row label="类型">
				<a-form-item>
					<tag-select>
						<tag-select-option>Bug</tag-select-option>
						<tag-select-option>Css</tag-select-option>
						<tag-select-option>Git</tag-select-option>
						<tag-select-option>JavaScript</tag-select-option>
						<tag-select-option>Vue</tag-select-option>
						<tag-select-option>Map</tag-select-option>
						<tag-select-option>webSocket</tag-select-option>
						<tag-select-option>uniApp</tag-select-option>
						<tag-select-option>Ztree</tag-select-option>
						<tag-select-option>前端面试题</tag-select-option>
						<tag-select-option>ES6</tag-select-option>
						<tag-select-option>TypeScript</tag-select-option>
						<tag-select-option>类目十</tag-select-option>
						<tag-select-option>类目十一</tag-select-option>
						<tag-select-option>类目十二</tag-select-option>
						<tag-select-option>类目十三</tag-select-option>
						<tag-select-option>类目十四</tag-select-option>
					</tag-select>
				</a-form-item>
			</form-row>

			<a-list itemLayout="vertical">
				<a-list-item :key="index_" v-for="(item,index_) in dataList" @click="goContent(item.id)">
					<a-list-item-meta :title="item.title">
						<div slot="description">
							<a-tag :key="index" v-for="(tabsItem,index) in item.tabs" color="cyan">{{tabsItem.tabsName}}</a-tag>
						</div>
					</a-list-item-meta>
					<div class="content">
						<div class="detail">
							{{item.describe}}
						</div>
					</div>

					<div class="author">
						<a-avatar size="small" v-bind:src="item.issuerImg" />
						<a>{{item.issuer}}</a><em>{{item.time}}</em>
						发布，原文资源链接：<a href="JavaScript:;">{{item.originalLink}}</a>
					</div>

					<span class="tabItem" slot="actions">
						<a-icon style="margin-right: 4px" type="search" />{{item.search}}</span>
					<span class="tabItem" slot="actions">
						<a-icon style="margin-right: 8px" type="message" />{{item.message}}</span>

				</a-list-item>
			</a-list>
			<a-pagination size="small" :total="50" show-size-changer show-quick-jumper style="text-align: center; margin-top: 20px;" />
		</a-card>
	</div>
</template>

<script>
	import TagSelect from '../../components/tool/TagSelect'
	import FormRow from '../../components/form/FormRow'
	const TagSelectOption = TagSelect.Option
	
	const blogList = require("@/mock/blog/blog.json");
	export default {
		name: 'ArticleList',
		components: {
			FormRow,
			TagSelectOption,
			TagSelect
		},
		data() {
			return {
				dataList: []
			}
		},
		mounted() {
			console.log(blogList)
			this.dataList = blogList.data
		},
		methods: {
			goContent(id) {
				this.$router.push('/blogContent?id='+ id)
			}
		}
	}
</script>

<style lang="less" scoped>
	.extra {
		width: 272px;
		height: 1px;
	}

	/deep/ .ant-list-item {
		cursor: pointer;
	}

	/deep/ .ant-avatar>img {
		margin-top: -1px;
	}

	.content {
		.detail {
			line-height: 22px;
			max-width: 720px;
		}
	}

	.author {
		color: @text-color-second;
		margin-top: 16px;
		line-height: 22px;

		&> :global(.ant-avatar) {
			vertical-align: top;
			margin-right: 8px;
			width: 20px;
			height: 20px;
			position: relative;
			top: 1px;
		}

		&>em {
			color: @disabled-color;
			font-style: normal;
			margin: 0 5px;
		}
	}
</style>
